<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-27 09:10:12
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-08-27 09:31:23
-->
<div class="tool">
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title m-subheader__title--separator">
                    <span>工具建模</span>
                </h3>
            </div>
        </div>
    </div>
    <div style="display: flex;">
        <div class="col-lg-4">
            <div class="m-portlet m-portlet--mobile">
                <span class="title">工具类别</span>
                <div class="row align-items-center">
                    <div class="primeng-datatable-container">
                        <div class="col-md-12" style="
                                                float: left;
                                                height: 740px;
                                            ">
                            <div style="margin-left: 5px;">
                                <input style="line-height: 24px!important;" id="search" type="text" size="30" pInputText
                                    [(ngModel)]="searchItem" placeholder="快速查询">
                                <button pButton type="button" label="查询" (click)="getTreeInfo(false)"
                                    style="margin-left: 10px;"></button>
                            </div>
                            <div style="margin-bottom: 1rem;margin-left: 5px;margin-top: 10px;">
                                <button pButton type="button" label="全部展开" (click)="expandAll()"
                                    style="margin-right: 0.5rem"></button>
                                <button pButton type="button" label="全部折叠" (click)="collapseAll()"
                                    style="margin-right: 0.5rem"></button>
                                <button
                                    [disabled]="ischeckTree&&(ischeckTree.nodeLevel==8||ischeckTree.nodeLevel==9||ischeckTree.isRelation==1)"
                                    pButton type="button" label="新增" (click)="insertBopTree(true)"
                                    style="margin-right: 0.5rem"></button>
                                <button
                                    [disabled]="ischeckTree&&(ischeckTree.nodeLevel==8||ischeckTree.nodeLevel==9||ischeckTree.key==-1 || ischeckTree.isRelation==1)"
                                    pButton type="button" label="修改" (click)="insertBopTree(false)"
                                    style="margin-right: 0.5rem"></button>
                                <button
                                    [disabled]="ischeckTree&&(ischeckTree.nodeLevel==8||ischeckTree.nodeLevel==9||ischeckTree.key==-1 || ischeckTree.isRelation==1)"
                                    pButton type="button" label="删除" (click)="deleteItem()"
                                    style="margin-right: 0.5rem"></button>

                            </div>
                            <p-tree [value]="files2" selectionMode="single" [(selection)]="selectedFiles"
                                (onNodeSelect)="nodeSelect($event)" [style]="{ height: '90%' }" [loading]="loadingtree">
                                <ng-template let-node pTemplate="default">
                                    <span> {{node.materialTypeName}} </span>
                                </ng-template>
                            </p-tree>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="m-portlet m-portlet--mobile">
                <span class="title">工具建模</span>
                <div class="row align-items-center" style="width: 100%;">
                    <div class="primeng-datatable-container" style="margin-left: 5px;">
                        <div class="col-md-12" style=" float: left;
                                height: 760px; width: 100%;">
                            <div class="p-formgroup-inline">
                                <span class="p-field">
                                    <p-button label="新增" (onClick)="addOrUpdate()"></p-button>
                                </span>
                                <span class="p-field ml">
                                    <p-button label="导入" (onClick)="import()"></p-button>
                                </span>
                                <span class="p-field ml">
                                    <p-button label="导出" (onClick)="export()"></p-button>
                                </span>
                                <span class="p-field ml">
                                    <span class="input-lable" style="margin-right: 5px;">物料：</span>
                                    <input style="line-height: 24px!important;" id="material" type="text" size="30"
                                        pInputText [(ngModel)]="material">
                                </span>
                                <span class="p-field ml">
                                    <span class="input-lable" style="margin-right: 5px;">物料类别：</span>
                                    <input style="line-height: 24px!important;" id="materialType" type="text" size="30"
                                        pInputText [(ngModel)]="materialType">
                                </span>
                                <span class="p-field ml">
                                    <span class="input-lable" style="margin-right: 5px;">规格型号：</span>
                                    <input style="line-height: 24px!important;" id="model" type="text" size="30"
                                        pInputText [(ngModel)]="model">
                                </span>
                                <p-button label="查询" (onClick)="getTableList(ischeckTree)" class="ml"></p-button>
                                <button pButton type="button" label="重置" (onClick)="reset()" class="ui-button-secondary"
                                    style="margin-left: 5px;"></button>
                            </div>
                            <div class="primeng-datatable-container" style="margin-top: 10px;width : 100%;">
                                <p-table #dataTable [value]="primengTableHelper.records"
                                    rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false"
                                    [lazy]="true" [scrollable]="true" [responsive]="primengTableHelper.isResponsive"
                                    [resizableColumns]="primengTableHelper.resizableColumns" [(selection)]="selectRow">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 50px">
                                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                            </th>
                                            <th style="width: 100px">操作</th>
                                            <th style="width: 50px">序号</th>
                                            <th style="width: 150px">物料代码</th>
                                            <th style="width: 150px">物料名称</th>
                                            <th style="width: 150px">规格型号</th>
                                            <th style="width: 150px">物料类别</th>
                                            <th style="width: 150px">单位</th>
                                            <th style="width: 100px">创建人</th>
                                            <th style="width: 150px">创建日期</th>
                                            <th style="width: 150px">备注</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                        <tr>
                                            <td style="width: 50px">
                                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                            </td>
                                            <td style="width: 100px">
                                                <div class="btn-group dropdown" dropdown container="body">
                                                    <button dropdownToggle
                                                        class="dropdown-toggle btn btn-sm btn-primary">
                                                        <i class="fa fa-cog"></i><span class="caret"></span> 操作
                                                    </button>
                                                    <ul class="dropdown-menu" *dropdownMenu>
                                                        <li>
                                                            <a href="javascript:;" (click)="addOrUpdate(record)">修改</a>
                                                        </li>
                                                        <li>
                                                            <a href="javascript:;" (click)="delete(record)">删除</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                            <td style="width: 50px">{{rowIndex+1}}</td>
                                            <td style="width: 150px">{{record.materialNo}}</td>
                                            <td style="width: 150px">{{record.materialName}}</td>
                                            <td style="width: 150px">{{record.model}}</td>
                                            <td style="width: 150px">{{record.materialTypeName}}</td>
                                            <td style="width: 150px">{{record.unit}}</td>
                                            <td style="width: 100px">{{record.createUser}}</td>
                                            <td style="width: 150px">{{record.creationTime | momentFormat:'YYYY-MM-DD
                                                HH:mm:ss'}}</td>
                                            <td style="width: 150px">{{record.remark}}</td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                                <div class="primeng-paging-container">
                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                    </p-paginator>
                                    <span class="total-records-count">
                                        {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- 导入 -->
    <p-dialog header="导入文件" [(visible)]="display" modal="modal" [responsive]="true">
        <p>提示：导入前请先下载模板<a style="color:#41ABE9" (click)="down()">点击下载模板</a></p>
        <p-fileUpload *ngIf="display" name="file" customUpload="true" (uploadHandler)="myUploader($event)"
         accept='application/vnd.ms-excel' multiple="false" maxFileSize="1000000"
            chooseLabel="请选择上传文件" uploadLabel="上传" cancelLabel="取消">
            <ng-template pTemplate="content">
                <ul *ngIf="uploadedFiles.length">
                    <li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
                </ul>
            </ng-template>
        </p-fileUpload>
        <p-footer>
            <button type="button" pButton icon="fa-close" (click)="display=false" label="取消"></button>
        </p-footer>
    </p-dialog>
    <!-- 新增物料类别   [bopInfo]="parentInfo"-->
    <app-tree-operation #TreeOperationComponent (modalSave)="getTreeInfo(false)" [parentrow]="ischeckTree"></app-tree-operation>
    <!-- 新增物料 -->
    <app-table-operation #TableOperationComponent [parentInfo]="ischeckTree" [editData]="rowdata" [title]="title"
        (modalSave)="getTableList(ischeckTree)"></app-table-operation>
</div>